<%@taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>

<link href="<c:url value="/resources/css/themes/redmond/jquery-ui-1.10.4.custom.min.css" />" rel="stylesheet" type="text/css" ></link>
<link href="<c:url value="/resources/css/ui.jqgrid.css" />" rel="stylesheet" type="text/css" ></link>

<script type="text/javascript" src="<c:url value="/resources/js/jquery-1.11.0.min.js" />"></script>
<script type="text/javascript" src="<c:url value="/resources/js/jquery-ui-1.10.4.js" />"></script>
<script type="text/javascript" src="<c:url value="/resources/js/grid.locale-en.js" />"></script>
<script type="text/javascript" src="<c:url value="/resources/js/jquery.jqGrid.min.js" />"></script>

<script type="text/javascript">
	$( document ).ready(function() {
		var colNames, colModel;
		 $.ajax({
	            url: "colData",
	            type: "GET",
	            contentType: "application/json; charset=utf-8",
	            data: {},
	            dataType: "json",
	            success: function (data, st) {
	                if (st == "success") {
	                    colNames = data.colNames;//jqgrid heading data
	                    colModel = data.colModel; // its column model
	                    createGrid();
	                }
	            },
	            error: function () {
	                alert("Error with AJAX callback");
	            }
	     });
		 
		 function createGrid() {
			 $("#grid").jqGrid({
					url: "list",
				    datatype: "json",
				    mtype: 'GET',
				    height: 255, 
				    autowidth: true,
				    viewrecords: true,
				    colNames: colNames,
				    colModel: colModel,
				    caption: "Stock Screener",
				    jsonReader : {
				    	root: "data",
				    	page: "page",
				        total: "total",
				        records: "records"
				    },
				    pager : '#gridpager',
				    rowNum: 10,
				    rownumbers: true
			});
		 }

	});
</script>

</head>
<body>
<div>
	Stock Screener
</div>
<div>
	<table id="grid"></table>
	<div id="gridpager"></div>
</div>
</body>
</html>